<template>
	<view>
		<title-nav :titleType="true"></title-nav>
		<view class="expert-content">
			<view class="expert-content__title">
				<text class="size28 iconColor">颜色</text>
			</view>
			<view class="expert-content__check">
				<view class="expert-content__box" v-for="(item,index) in items" :key="index" @tap="checkbox(item,index)">
					<i class="icon pagesColor size42" v-if="radioif(item.name)">&#xe639;</i>
					<i class="icon iconColor size42" v-else>&#xe65e;</i>
					<text class="size30 textColor">{{item.name}}</text>
				</view>
			</view>
			<view class="expert-content__title">
				<text class="size28 iconColor">法术力</text>
			</view>
			<view class="expert-content__fs">
				<view class="expert-content__zan">
					<view class="expert-content__fsde">
						<text
							class="size28 textColor" 
							v-for="(item,index) in vusCheck">{{item}}</text>
					</view>
					<view class="expert-content__del" @tap="vusDel">
						<i class="icon size42 iconColor">&#xe68b;</i>
					</view>
				</view>
				<view class="expert-content__view">
					<view 
					  class="expert-content__wb size26 textBai" 
					  v-for="(item,index) in vus" :key="index" @tap="vusTap(item.name)">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import titleNav from '@/components/status-nav/w-titleBar.vue';
	export default {
		components:{
			titleNav
		},
		data() {
			return {
				checkItems:[],
				vusCheck:[],
				items:[
					{name:'白',id:1},
					{name:'蓝',id:2},
					{name:'黑',id:3},
					{name:'红',id:4},
					{name:'绿',id:5},
					{name:'无',id:6},
					{name:'必须多色',id:7},
					{name:'不含未选',id:8},
					{name:'部分匹配',id:9},
				],
				vus:[
					{name:'{W/U}'},
					{name:'{W/B}'},
					{name:'{B/R}'},
					{name:'{B/G}'},
					{name:'{U/B}'},
					{name:'{U/R}'},
					{name:'{R/G}'},
					{name:'{R/W}'},
					{name:'{G/W}'},
					{name:'{G/U}'},
					{name:'{2/W}'},
					{name:'{2/U}'},
					{name:'{2/B}'},
					{name:'{2/R}'},
					{name:'{2/G}'},
					{name:'{W/P}'},
					{name:'{U/P}'},
					{name:'{B/P}'},
					{name:'{R/P}'},
					{name:'{G/P}'}
				]
			};
		},
		methods:{
			vusDel(){
				this.vusCheck.pop()
			},
			vusTap(name){
				this.vusCheck.push(name);
			},
			//多选判断
			radioif(name){
				const {checkItems} = this;
				var flag = checkItems.indexOf(name)
				if(flag != -1){
					return true;
				}else{
					return false;
				}
				// return flag;
			},
			checkbox(item,index){
				const {checkItems} = this;
				var flag = checkItems.some(i=>i === item.name);
				if(!flag){
					console.log('不存在')
					this.checkItems.push(item.name);
					this.$forceUpdate();
				}else{
					console.log('存在')
					let ind = checkItems.indexOf(item.name);
					this.checkItems.splice(ind,1);
					this.$forceUpdate();
				}
			}
		}
	}
</script>

<style lang="scss">
	.expert-content{
		&__title{
			padding:25upx 24upx;
			box-sizing: border-box;
			border-bottom: 2upx solid #e1e1e1;
		}
		&__check{
			padding:25upx 10upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content:space-around;
			flex-wrap: wrap;
			border-bottom:2upx solid #e1e1e1;
		}
		&__box{
			padding:10upx 10upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.icon{
				margin-right: 15upx;
			}
		}
		&__fs{
			padding:25upx 24upx;
			box-sizing: border-box;
			border-bottom:2upx solid #e1e1e1;
		}
		&__view{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content:space-between;
		}
		&__wb{
			width:130upx;
			height:60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			background-color:#C0C0C0;
			border-radius:15upx;
			margin:10upx 0;
		}
		&__zan{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:20upx 0;
			border-bottom:2upx solid #e1e1e1;
		}
	}
</style>
